<script setup lang="ts">
import { request } from "@/http/axios"
import { Plus } from "@element-plus/icons-vue"
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import projectUpload from "./projectUpload.vue"

const router = useRouter()
const dialogFormVisible = ref(false)
const formLabelWidth = "140px"
const items = ref<any[]>()
const loading = ref(false)
const projectUploadRef = ref()
const form = ref({
  name: "ft"
})
function handleClick(item: any) {
  if (item.type === "add") {
    // 跳转到新增页面
    dialogFormVisible.value = true
  } else {
    // 跳转到详情页面
    console.log("跳转到详情页面", item)
    const { href } = router.resolve({
      path: `/imagesDesign`
    })
    window.open(`${href}/${item.title}`, "_blank")
  }
}
function getFormData(data = {}) {
  const formData = new FormData()
  for (const k in data) {
    const item = data[k as keyof typeof data]
    formData.append(k, item)
  }
  return formData
}
async function handleConfirm() {
  // 获取上传的文件列表
  const result: any[] = []
  const fileList = projectUploadRef.value.fileList
  console.log(fileList.length, "fileList")
  // 这里可以进行表单提交的操作
  if (form.value.name.length === 0) {
    ElMessage.error("请输入项目名称")
    return
  }
  if (fileList.length === 0) {
    ElMessage.error("请上传文件")
    return
  }
  console.log("提交表单", form.value)

  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i]
    const data = {
      dir_name: form.value.name,
      file: file.raw,
      marked: "",
      file_name: ""
    }
    console.log(data, "data")
    const formData = getFormData(data)
    console.log(formData, "formData")
    const res = await request<any>({
      url: "/upload/file",
      method: "post",
      data: formData
    })
    if (res.code === 200) {
      result.push(true)
      dialogFormVisible.value = false
      await getListDataApi()
    } else {
      result.push(false)
      ElMessage.error(res.msg)
    }
    console.log(res, "上传结果")
  }
  const isSuccess = result.every(item => item === true)
  if (isSuccess) {
    ElMessage.success("上传成功")
    setTimeout(()=>{
      const { href } = router.resolve({
      path: `/imagesDesign`
    })
    window.open(`${href}/${form.value.name}`, "_blank")
    },1000)
  } else {
    ElMessage.error("上传失败")
  }
}

async function getListDataApi() {
  loading.value = true
  const res = await request<any>({
    url: "/file/list",
    method: "get"
  })
  if (res.code === 200) {
    items.value = [
      { title: "新增项", description: "点击新增内容", type: "add" }
    ]
    items.value = items.value.concat(
      res.data.map((item: any) => {
        return {
          title: item,
          description: item,
          type: "item"
        }
      })
    )
  }
  loading.value = false
}

onMounted(async () => {
  getListDataApi()
})
</script>

<template>
  <div class="project" v-loading="loading">
    <div class="project-list-container">
      <div v-for="(item, index) in items" :key="index" class="project-list-item" @click="handleClick(item)">
        <template v-if="item.type === 'add'">
          <div class="project-item-icon">
            <el-icon size="30">
              <Plus />
            </el-icon>
          </div>
        </template>
        <div class="project-item-content" v-else>
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
      <el-dialog v-model="dialogFormVisible" title="创建项目" width="800" size="small">
        <el-form :model="form">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="上传素材" :label-width="formLabelWidth">
            <projectUpload ref="projectUploadRef" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
              Cancel
            </el-button>
            <el-button type="primary" @click="handleConfirm">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.project {
  width: 100%;
  height: 100%;
}
.project-list-container {
  display: flex;
  flex-wrap: wrap;
}

.project-list-item {
  width: calc(20% - 10px); /* 每行 5 个，减去间距 */
  margin: 5px;
  height: 180px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #fff;
}

.project-item-content {
  padding: 10px;
}
.project-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
</style>
